<template>
<div class="p-relative w-100 h-100 water-com ">
  <p class="header p-absolute w-100 p-l-30 p-r-30 flex justify-between align-center">
    <svg-icon :icon-class="icon"/>
    <span>详情{{ chartData.id }}</span>
  </p>
  <div class="chart-box ">
    <WaterLiquidfill
        :label="label"
        :value="chartValue"
    />
  </div>
  <div class="flex justify-between p-l-30 p-r-30 align-center">
    <div class="flex justify-between align-center">
      <span>{{ footerLabel.left.label }}</span>
      <span class="m-l-30">{{ footerLabel.left.value }}</span>
    </div>
    <div class="flex justify-between align-center">
      <span>{{ footerLabel.right.label }}</span>
      <span class="m-l-30">{{ footerLabel.right.value }}</span>
    </div>
  </div>
</div>
</template>

<script>
import WaterLiquidfill from '../views/Charts/EchartComp/WaterLiquidfill'
export default {
    name: 'WaterLiquidWithLabel',
    components: {
        WaterLiquidfill
    },
    props: {
        label: {
            type: String,
            default: '虚拟机总数'
        },
        chartData: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        footerLabel () {
            return this.chartData.label
        },
        icon () {
            return this.chartData.type
        },
        chartValue () {
            return this.chartData.value
        }
    }
}
</script>

<style lang="scss" scoped>
.water-com{
  width: 100%;
  height: 250px;
}
.header{
  left: 0;
  top: 0;
}
.chart-box{
  height: calc(100% - 30px);
}
</style>
